import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Button, Space } from 'antd';

export default function Page1() {
  // 通过useSelector获取仓库数据
  const { num } = useSelector((state: RootState) => {
    return {
      // 注意在使用的时候也注意模块化
      num: state.handleNum.num
    }
  })// 数据多了，就在这里面接着写和解构

  console.log(useSelector((state: RootState) => {
    return {
      // 注意在使用的时候也注意模块化
      num: state.handleNum.num
    }
  }))

  // 通过useDispatch修改仓库数据
  const dispatch = useDispatch()
  const changeNum = () => {
    dispatch({ type: 'add1' })
  }

  const changeNum2 = () => {
    dispatch({ type: 'add2', val: 10 })
  }

  // redux-thunk用法
  const changeNum3 = () => {
    dispatch((dis: Function) => {
      setTimeout(() => {
        dis({ type: 'add1' })
      }, 1000);
    })
  }


  return (
    <div>
      page1
      <h2>{num}</h2>
      <Button onClick={changeNum}>add1</Button>
      <Button onClick={changeNum2}>add2</Button>
      <Button onClick={changeNum3}>异步按钮</Button>
    </div>
  )
}
